<template>
    <div class="pages">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-sticky>
                <div class="header">
                    <div class="fls" @click="$router.back(-1)">
                        <img src="../../../static/images/icon-back.png" alt="">
                    </div>
                    <div class="centern">选择划拨对象</div>
                    <div class="frs_right" @click="inater()">
                        <!-- <img src="../../../static/images/icon-shcx-shhb.png" alt="">
                        <div class="titlecenter">商户划拨</div> -->
                    </div>
                </div>
                <div class="search">
                    <div class="search_icon">
                        <form action="/">
                        <van-search v-model="value" shape="round" :show-action = "false" placeholder="请输入商户名称" @search="onSearch" @cancel="onCancel" />
                        </form>
                    </div>
                    <div class="search_right" @click="show = true">
                        <div class="btn_text">{{actiontit}}</div>
                        <img src="../../../static/images/icon-arrow.png" alt="">
                    </div>
                </div>
            </van-sticky>

            <!-- 循环列表 -->
            <div class="c_ibodys">
                <div class="a_list">
                    <div class="a_header">
                        <div class="a_userinfo">
                            <div class="a_pic">
                                <!-- <img src="" alt=""> -->
                            </div>
                            <div class="a_shopName">商户名称</div>
                        </div>
                        <div class="dai_shenhe">我</div>
                    </div>

                    <div class="manager">职务名称：服务商</div>
                    <div class="address">所属团队：无</div>
                    <div class="a_bottom">
                        <div class="mendianshu">商户数：12346</div>
                        <div class="zhongduanshu">终端数：12346</div>
                    </div>
                </div>
                <div class="a_list" :class="actives == index ? 'acrtibgsvb':''" v-for="(item,index) in a_list" :key="index" @click="activeuss(index)">
                    <div class="a_header">
                        <div class="a_userinfo">
                            <div class="a_pic">
                                <!-- <img src="" alt=""> -->
                            </div>
                            <div class="a_shopName">商户名称</div>
                        </div>
                        <!-- <div class="active_type" v-if="item.type==0">直属</div>
                        <div class="dai_shenhe" v-if="item.type==1">待审核</div>
                        <div class="bohui" v-if="item.type==2">已驳回</div> -->
                    </div>

                    <div class="manager">职务名称：团队长</div>
                    <div class="address">所属团队：团队名称</div>
                    <div class="a_bottom">
                        <div class="mendianshu">商户数：12346</div>
                        <div class="zhongduanshu">终端数：12346</div>
                    </div>
                </div>

                <div class="isonquens" @click="ioske()">确定</div>
            </div>


            <van-action-sheet v-model="show" :actions="actions"  cancel-text="取消" @select="onSelect" close-on-click-action @cancel="onCancel"/>
        </van-pull-refresh>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            actives:-1,
            count: 0,
            isLoading: false,
            value: '',
            show: false,
            actiontit:'所有人',
            actions: [{ name: '所有人' }, { name: '选项二' }, { name: '选项三' }],
            a_list:[
                {type:0},{type:1},{type:2},{type:0},{type:0}
            ],

        }
    },
    methods:{
        onSelect(item){
            this.actiontit = item.name
        },
        onSearch(val) {
            Toast(val);
        },
        onCancel() {
            Toast('取消');
        },
        onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 1000);
        },
        // 商户信息
        BusinessInformation(){
            this.$router.push({ name: "BusinessInformation" });
        },
        // 商户划拨
        inater(){
            this.$router.push({ name: "commercial_transfer" });
        },

        activeuss(index){
            this.actives = index
        },
        ioske(){
            this.$router.push({ name: "MerchantRate" });
        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 28%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .header>.fls>img{
        width: 24px;
        height: 24px;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .frs_right{
        width: 28%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .frs_right>img{
        width: 24px;
        height: 24px;
    }
    .titlecenter{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        margin-left: 8px;
    }
    
    .search{
        width: 100%;
        height: 44px;
        background: #3288FF;
        padding: 0 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .search_icon{
        width: 66%;
    }
    .van-search{
        width: 100%;
        border-radius: 20px;
        background: #FFFFFF;
        padding: 0 !important;
    }
    .search_right{
        display: flex;
        align-items: center;
    }

    .search_right>.btn_text{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
    .search_right>img{
        width: 16px;
        height: 16px;
    }


    .c_ibodys{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    .a_list{
        width: 100%;
        padding: 8px 16px 0px 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
        margin-bottom: 16px;
        border: 1px solid #fff;
    }
    .a_header{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .a_userinfo{
        display: flex;
        align-items: center;
    }
    .a_pic{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #C4C4C4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .a_pic>img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .a_shopName{
       color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
        margin-left: 8px;
    }
    .active_type{
        width: 72px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
    }
    .dai_shenhe{
        width: 114px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .bohui{
        width: 114px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EB5757;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px; 
    }

    .manager{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 11px;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .address{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 16px;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .a_bottom{
        margin-top: 16px;
        border-top: 1px solid #F2F2F2;
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .zhongduanshu{
        margin-left: 40px;
    }


    .isonquens{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
        margin-top: 32px;
    }

    .acrtibgsvb{
        border-radius: 4px;
        background: #EEF5FF;
        border: 1px solid #3288FF;
    }
</style>